<template>
  <div>
    <el-dialog
      @open="sipOpen"
      :title="
        data === 'first' ? '循环播报' : data === 'second' ? '定时播报' : ''
      "
      :visible.sync="AddEditdialogVisible"
      width="80%"
      :before-close="close"
      @close="close"
    >
      <div class="dashboard-container">
        <!-- <div class="dashboard-text">name: {{ name }}</div> -->
        <el-card class="box-card">
          <!-- 表单 -->
          <div class="timeBox">
            <el-form
              v-loading="loading"
              ref="form"
              :model="form"
              :rules="Rules"
              label-width="170px"
            >
              <!-- 日期和时间 -->
              <el-form-item label="日期和时间" prop="time">
                <el-date-picker
                  value-format="timestamp"
                  v-model="form.time"
                  :type="
                    form.broadcast_mode === 2
                      ? 'datetimerange'
                      : form.broadcast_mode === 1 || 3
                      ? 'datetime'
                      : ''
                  "
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker
                >&nbsp;&nbsp;&nbsp;&nbsp;
                <span>ps:循环播报时间不能大于5分钟</span>
              </el-form-item>
              <!-- 播报模式 -->
              <el-form-item label="播报模式" prop="broadcast_mode">
                <el-select
                  @change="broadcast_mode_change"
                  v-model="form.broadcast_mode"
                  placeholder="请选择播报模式"
                >
                  <el-option label="单次" :value="1"></el-option>
                  <el-option label="循环" :value="2"></el-option>
                  <el-option label="永久" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <!-- 每天启用 -->
              <el-form-item label="每天启用" prop="broadcast_mode">
                <el-select
                  @change="broadcast_mode_change"
                  v-model="form.everyday"
                  placeholder="请选择"
                >
                  <el-option label="当天播报" :value="0"></el-option>
                  <el-option label="每天播报" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <!-- 播报间隔 -->
              <!-- <el-form-item label="播报间隔" prop="broadcast_interval">
                <el-input
                  :disabled="form.broadcast_mode === 1 ? true : false"
                  v-model="form.broadcast_interval"
                  style="width: 80px"
                ></el-input
                >秒
              </el-form-item> -->
              <!-- sip服务器ip -->
              <!-- <el-form-item label="sip服务器ip" prop="registration_server">
                <el-input v-model="form.registration_server"></el-input>
              </el-form-item> -->
              <!-- sip服务器ip -->
              <!-- <el-form-item
                label="Sip服务器端口"
                prop="registration_server_port"
              >
                <el-input v-model="form.registration_server_port"></el-input>
              </el-form-item> -->
              <!-- 发起方ID -->
              <!-- <el-form-item label="发起方ID" prop="user_id">
                <el-input v-model="form.user_id"></el-input>
              </el-form-item> -->
              <!-- 发起方密码 -->
              <!-- <el-form-item label="发起方密码" prop="password">
                <el-input v-model="form.password"></el-input>
              </el-form-item> -->
              <!-- 接收方ID -->
              <el-form-item label="接收方" prop="call_id">
                <template>
                  <el-select
                    v-model="form.call_id"
                    placeholder="请选择"
                    @change="sipChange"
                    multiple
                    collapse-tags
                  >
                    <!-- <el-option label="关掉" value="8012"> </el-option>
                    <el-option label="强强强强" value="1001"> </el-option> -->
                    <el-option
                      v-for="item in callData"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
              <!-- <el-form-item label="接收方ID" prop="call_id" v-else>
                <el-input v-model="form.call_id"></el-input>
              </el-form-item> -->
              <!-- 播报内容类型 -->
              <!-- <el-form-item label="播报内容类型" prop="cont_type">
                <el-input
                  v-if="data.id"
                  disabled
                  v-model="form.cont_type"
                  placeholder="0是文字播报;  1是路径播报;"
                ></el-input>
                <el-input
                  v-else
                  v-model="form.cont_type"
                  placeholder="0是文字播报;  1是路径播报;"
                ></el-input>
              </el-form-item> -->
              <!-- 播报内容/播报文件路径 -->
              <el-form-item label="播报内容" prop="content">
                <el-input v-model="form.content"></el-input>
              </el-form-item>
              <!-- 播报内容/播报文件路径 -->
              <!-- <el-form-item label="语速倍数">
                <el-input v-model="form.speed"></el-input>
              </el-form-item> -->
              <!-- 播报内容/播报文件路径 -->
              <!-- <el-form-item label="音色">
                <el-input v-model="form.voice_type"></el-input>
              </el-form-item> -->
              <!-- 请求按钮 -->
              <div class="sipButton">
                <el-button type="primary" @click="getSip('form')"
                  >确定</el-button
                >
                <el-button icon="el-icon-refresh-left" @click="reset"
                  >重置</el-button
                >
              </div>
            </el-form>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  sendSipData,
  sipInsert,
  sipUpdate,
  sipStaus,
  ajaxInitiator,
  sipGet,
  siptimingSend,
  sipLoopSend,
} from "@/api/sip";
import { Message } from "element-ui";
import { getcheck } from "../../encapsulation.js";
export default {
  name: "Dashboard",
  props: {
    AddEditdialogVisible: {
      type: Boolean,
    },
    data: {
      typr: Object,
    },
  },
  created() {
    // this.sip_init();
  },
  // 监听选择值
  // watch: {
  //   "form.time"(newValue, oldValue) {
  //     console.log(154,newValue,oldValue);
  //   },
  // },
  data() {
    return {
      // 加载
      loading: false,
      forbidden: true,
      //获取sip发起地数据
      callData: [],
      //sip配置
      sipForm: {},
      // 表单参数
      // form: {
      //   registration_server: "",
      //   registration_server_port: "",
      //   user_id: "",
      //   password: "W#w501IP",
      //   call_id: "",
      //   cont_type: "0",
      //   content: "",
      //   speed: "0.91",
      //   voice_type: "0",
      //   time: "",
      //   broadcast_mode: "",
      //   broadcast_interval: "",
      //   stop: "",
      //   user_id_name: "帆帆帆帆",
      //   call_id_name: "",
      // },
      form: {
        sip_ip: "",
        sip_port: "",
        user_id: "",
        password: "",
        call_id: "",
        content: "",
        start_time: "",
        end_time: "",
        time: "",
        everyday: "",
      },
      // 定时参数必填规则
      Rules: {
        time: [
          // { required: true, message: "日期时间不能为空", trigger: "blur" },
        ],
        // broadcast_mode: [
        //   { required: true, message: "请选择播报模式", trigger: "blur" },
        // ],
        // broadcast_interval: [
        //   { required: true, message: "请选择播报间隔", trigger: "blur" },
        // ],
        sip_ip: [
          { required: true, message: "sip服务器不能为空", trigger: "blur" },
        ],
        sip_port: [
          { required: true, message: "Sip服务器端口不能为空", trigger: "blur" },
        ],
        user_id: [
          { required: true, message: "发起方ID不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "发起方密码不能为空", trigger: "blur" },
        ],
        call_id: [
          { required: true, message: "接收方ID不能为空", trigger: "blur" },
        ],
        cont_type: [
          { required: true, message: "播报内容类型不能为空", trigger: "blur" },
        ],
        content: [
          {
            required: true,
            message: "播报内容/播报文件路径不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    async sip_init() {
      let res = await sipGet();
      this.sipForm = res.data.data[0];
      this.form.sip_ip = this.sipForm.sip_sever;
      this.form.sip_port = this.sipForm.port;
      this.form.user_id = this.sipForm.user_id;
      this.form.password = this.sipForm.password;
      console.log(this.form);
    },
    async getSip(formName) {
      let resvalidate;
      let five_minutes;
      // 获取表单校验布尔值
      this.$refs[formName].validate((valid) => {
        resvalidate = valid;
      });
      // 判断
      if (resvalidate === false) {
        return;
      }
      this.form.broadcast_mode = String(this.form.broadcast_mode);

      if (this.form.broadcast_mode === "1") {
        // 乘1000换算秒数
        this.form.start_time = String(this.form.time / 1000);
        this.form.end_time = String(0);
      }

      if (this.form.broadcast_mode === "2") {
        // 乘1000换算秒数
        this.form.start_time = String(this.form.time[0] / 1000);
        this.form.end_time = String(this.form.time[1] / 1000);
        //限制循环发送时间为5分钟
        if (Number(this.form.end_time) > Number(this.form.start_time) + 300) {
          console.log(268, this.form.start_time + 300);
          this.form.broadcast_mode = "";
          this.$message.warning("时间不能超过5分钟");
          return;
        }
      }
      if (this.form.broadcast_mode === "3") {
        // 乘1000换算秒数
        this.form.start_time = String(0);
        this.form.end_time = String(0);
      }
      this.form.number_of_broadcasts = "1";
      // 加载
      this.loading = true;
      // if (this.data.id) {
      //   this.form.id = String(this.data.id);
      //   const res = await sipUpdate(this.form);
      //   if (res.status === 200) {
      //     this.loading = false;
      //     this.$emit("tableUpate");
      //     Message.success("编辑成功");
      //     getcheck();
      //   }
      //   if (res.status === 201) {
      //     this.loading = false;
      //     this.$emit("tableUpate");
      //     Message.warning(res.data.data);
      //   }
      // } else {
      //   const res = await sipInsert(this.form);
      //   if (res.status === 200) {
      //     this.loading = false;
      //     this.$emit("tableUpate");
      //     Message.success("新增成功");
      //   }
      // }

      //发送循环和定时请求
      if (this.data === "second") {
        let call_idList = [];
        for (let key in this.form.call_id) {
          if (this.form.call_id.hasOwnProperty(key)) {
            call_idList.push(this.form.call_id[key]);
          }
        }
        if (call_idList.length >= 2) {
          this.loading = false;
          this.form.call_id = call_idList.join("@");
          let res = await siptimingSend(this.form);
          Message.success("发送成功")
          this.$emit("tableUpate");
        } else {
          this.loading = false;
          this.form.call_id = this.form.call_id[0]
          let res = await siptimingSend(this.form);
          Message.success("发送成功")
          this.$emit("tableUpate");
        }
        return;
      }

      if (this.data === "first") {
        let call_idList = [];
        for (let key in this.form.call_id) {
          if (this.form.call_id.hasOwnProperty(key)) {
            call_idList.push(this.form.call_id[key]);
          }
        }

        if (call_idList.length >= 2) {
          this.loading = false;
          this.form.call_id = call_idList.join("@");
          let res = await sipLoopSend(this.form);
          Message.success("发送成功")
          this.$emit("tableUpate");
        } else {
          this.loading = false;
          this.form.call_id = this.form.call_id[0]
          let res = await siptimingSend(this.form);
          Message.success("发送成功")
          this.$emit("tableUpate");
        }
        return;
      }
    },
    // 改变选用值
    broadcast_mode_change(data) {
      if (data === 2) {
        //截切切换时间组件没有清空导致错误
        this.form.time = "";
      }
    },
    reset() {
      this.form = {
        registration_server: "",
        registration_server_port: "",
        user_id: "",
        password: "",
        call_id: "",
        cont_type: "",
        content: "",
        speed: "",
        voice_type: "",
      };
    },
    // 对话框打开回调
    async sipOpen() {
      let name = JSON.parse(localStorage.getItem("HSKJ-username"));
      const res = await ajaxInitiator({ userChanne: name });
      this.callData = res.data.meta.data;
      // // 处理成element ui 使用的格式
      this.callData.forEach((item) => {
        item.label = item.Initiator_name;
        item.value = String(item.Initiator_id);
      });

      // if (this.data.id) {
      //   this.form = Object.assign({}, this.data);
      //   // 编辑播报
      //   if (typeof(this.form.call_id) === 'string' ) {
      //     this.form = this.data;
      //     this.form.call_id = [this.data.call_id]
      //   }

      //   this.$set(this.form, "time", [
      //     this.form.start_time * 1000,
      //     this.form.end_time * 1000,
      //   ]);

      //   // this.form.stop = String(this.form.stop);

      //   // 处理发送请求回显转化字符串
      //   // this.form.broadcast_mode = String(this.form.broadcast_mode);
      // } else {
      //   // 新增
      //   this.form = {
      //     registration_server: "",
      //     call_id_name: "",
      //     registration_server_port: "",
      //     user_id: "",
      //     password: "",
      //     call_id: "",
      //     cont_type: "0",
      //     content: "",
      //     speed: "0.91",
      //     voice_type: "0",
      //     time: "",
      //     broadcast_mode: "",
      //     broadcast_interval: "1",
      //     stop: "0",
      //     user_id_name: "帆帆帆帆",
      //     call_id_name: "尖峰山01",
      //   };
      //   //获取发送地址参数
      //   this.sip_init()
      // }

      //区分循环和定时
      if (this.data === "second") {
        this.form = {
          call_id: "",
          content: "",
          start_time: "",
          end_time: "",
          time: "",
        };
        this.sip_init();
      }

      if (this.data === "first") {
        this.form = {
          call_id: "",
          content: "",
          start_time: "",
          end_time: "0",
          time: "",
        };
        this.sip_init();
      }
    },
    // 选择值
    sipChange(data) {
      //单选
      // let newData = this.callData.find((item) => {
      //   return item.value === data;
      // });
      // this.form.call_id_name = newData.label;

      //多选
      this.form.call_id = data;
    },
    // 关闭回调
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.sipButton {
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
